<template>
	<scroll-view 
		style="overflow: hidden;"
		:scroll-y="!downing" 
		:scroll-top="scrollNum"
        :lower-threshold="100"
		@scrolltolower="onDowning"
		@touchstart="onStart"
		@touchend="onEnd"
		@touchmove="onMove"
		@scroll="onScroll"
	>
		
		<view class="list-pull-wrap" :style="'height:' + pullNum + 'rpx'">
			<view v-if="loading" class="list-pull-block" >
				<r-load-icon/>
				<view class="list-pull-text" style="margin-left: 16rpx">正在刷新</view>
			</view>
			<view v-else class="list-pull-block">
				<view class="list-pull-text">下拉刷新</view>
			</view>
		</view>
		<template v-if="loading">
			<!-- <l-load style="text-align: center;" title="努力加载中..."/> -->
			<view class=""></view>
		</template>
		<template v-else-if="!dataSource || dataSource.length == 0">
			<r-empty :emptyTitle="emptyTitle" :emptySubTitle="emptySubTitle" wrapClass="list-empty-wrap"/>
		</template>
		<template v-else>	
			<view v-for="(item,index) in dataSource" :key="'list-item-' + index" :class="itemClass">
				<slot :item="item" :index="index"/>
			</view>
			<view v-if="lasting" class="list-last-block">
				已经到底了
			</view>
			<view else class="list-down-block">
				<r-load-icon/>
			</view>
		</template>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scrollNum: 0,
				scrollTop: 0,
				startNum: 0,
				pullNum: 0,
				isTriggered: false,
				isPulling: false,
			}
		},
		model:{
			prop: "pulling",
			event: "onPulling"
		},
		props: {
			emptyTitle: {
				type: String,
				default: '',
			},
			emptySubTitle: {
				type: String,
				default: '',
			},
			threshold: {
				type: [Number, String],
				default: 300
			},
			itemClass: {
				type: String,
				default: '',
			},
			loading: {
				type: Boolean,
				default: true
			},
			pullEnable: {
				type: [Boolean,String],
				default: false
			},
			dataSource: {
				type: Array,
				default: []
			},
			pulling: {
				type: [Boolean,String],
				default: false
			},
			downing: {
				type: [Boolean,String],
				default: false
			},
			lasting: {
				type: [Boolean,String],
				default: false
			}
		},
		watch: {
			pulling: function(newVal) {
				if(!newVal) {
					this.pullNum = 0;
				}
			}
		},
		methods: {
			onScroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			
			onStart: function(e) {
				if(this.pullEnable) {
					this.startNum = e.changedTouches[0].pageY;
				}
			},
			onMove: function(e) {
				if(this.pullEnable && this.startNum) {					
					const endNum = e.changedTouches[0].pageY;
					const pullNum = endNum - this.startNum;
					this.pullNum = pullNum > this.scrollTop ? (pullNum - this.scrollTop) : 0;
				}
			},
			onEnd: function(e) {
				if(this.pullEnable && this.startNum) {
					const endNum = e.changedTouches[0].pageY;
					const pullNum = endNum - this.startNum;
					if(!this.pulling && pullNum > 0) {					
						if(pullNum > this.threshold && this.scrollTop<20) {
							this.pullNum = 120;
                            this.$emit('onPulling',false);
						} else {
							this.pullNum = 0;
						}
					}
				}
			},
			onDowning: function() {
                if(this.downing) return;
                this.$emit('onDowning');	
			},
			onScrollTop: function() {
				this.scrollNum = this.scrollTop;
				this.$nextTick(() => {
					this.scrollNum = 0;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
